<%--
  Created by IntelliJ IDEA.
  User: mkr
  Date: 2022/5/17
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <font color="#8b008b" size="10">用户注册</font>
    用户名：<input type="text" name="username" id="username"/><br>
    密码：<input type="text" name="pwd" id="pwd"/><br>
    <input type="button" value="注册" onclick="regist()"/>

    <script type="text/javascript">
        function regist() {
            //1、获取input输入框的值
            var username = document.getElementById("username").value;
            // var pwd = document.getElementById("pwd").value;

            //2、进行验证，输入的值不为null
            if (username != null && username != ""){

                //3、创建Ajax对象
                var xmlhttp;
                if (window.XMLHttpRequest){
                    //浏览器为IE7+、火狐、谷歌
                    xmlhttp = new XMLHttpRequest();
                } else {
                    //浏览器为IE5、IE6
                    xmlhttp = new ActiveXObject();
                }

                //4、设置监听、监听返回的状态码
                xmlhttp.onreadystatechange = function () {
                    //readyState状态码为4代表请求完成、响应已就绪
                    //state状态码为200 代表http请求成功
                    if( xmlhttp.readyState == 4 && xmlhttp.state == 200 ){
                        //5、获取响应的数据
                        var result = xmlhttp.responseText;

                        if (result == "1"){
                            //该用户可以注册
                            var html = "<font color='aqua'>恭喜您可以注册了！</font>";
                            sp.innerHTML = html ;
                        } else {
                            //该用户已经存在
                            var html = "<font color='aqua'>该用户已存在</font>";
                            sp.innerHTML = html;
                        }
                    }
                }
            }
            //7、设置Ajax的请求方式和请求路径
            xmlhttp.open("GET" , "${pageContext.request.contextPath}/registSerclet",true);
            //8、设AJax的请求头
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //9、发送请求
            xmlhttp.send("name="+username);
        }
    </script>

</body>
</html>
